<template>
  <!-- 头部区域 -->
  <header>
    <!-- 搜索下载区域 -->
    <div class="search-box">
      <div id="search">
        <input class="search" type="text" placeholder="国子监来了个女弟子" />
        <span class="iconfont public-search"></span>
      </div>
      <span class="iconfont home-download"></span>
      <router-link to="/Jilu"><span class="iconfont home-history"></span></router-link>
      
    </div>
    <!-- 导航区域 -->
    <div class="site_nav">
      <ul class="hul">
        <li active-class="active" class="hli">
          <router-link to="/HomeHot">热门</router-link>
        </li>
        <li active-class="active" class="hli">
          <router-link to="/">精选</router-link>
        </li>
        <li active-class="active" class="hli">
          <router-link to="/HomeTv">电视剧</router-link>
        </li>
        <li active-class="active" class="hli">
          <router-link to="/HomeMovie">电影</router-link>
        </li>
        <li active-class="active" class="hli">综艺</li>
        <li active-class="active" class="hli">动漫</li>
        <li active-class="active" class="hli">少儿</li>
        <li active-class="active" class="hli">体育</li>
        <li active-class="active" class="hli">电竞</li>
      </ul>
      <div class="nav-menu">
        <span class="iconfont home-caidan-02"></span>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: "Header",
};
</script>

<style scoped>
@import url(../../../assets/iconfont/iconfont.css);

header {
  width: 4.14rem;
  height: 1rem;
  background-color: rgb(255, 255, 255);
  position: fixed;
  z-index: 10;
  top: 0;
  box-sizing: border-box;
  padding: 0 0.15rem;
}

/* 搜索下载区域 */

header .search-box {
  height: 0.52rem;
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .search-box #search {
  width: 3rem;
  position: relative;
}

header .search-box .search {
  width: 100%;
  height: 0.36rem;
  font-size: 0.14rem;
  border: none;
  border-radius: 0.18rem;
  box-sizing: border-box;
  padding-left: 20px;
  background-image: linear-gradient(
    90deg,
    rgb(230, 245, 250),
    rgb(250, 233, 238) 50%
  );
}

.public-search {
  position: absolute;
  font-size: 0.18rem;
  right: 0.15rem;
  line-height: 0.36rem;
}

.home-download,
.home-history {
  font-size: 0.22rem;
}

/* 导航区域============================================= */

header .site_nav {
  height: 0.41rem;
  /* background-color: rgb(113, 138, 170); */
  position: relative;
}

/* 隐藏滚动条 */

header .site_nav .hul::-webkit-scrollbar {
  display: none;
}

header .site_nav .hul {
  display: flex;
  align-items: center;
  overflow: auto;
}

header .site_nav .hli {
  padding-right: 0.18rem;
  line-height: 0.41rem;
  flex-shrink: 0;
}

header .site_nav .nav-menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.41rem;
  height: 0.41rem;
  text-align: right;
  background: linear-gradient(90deg, #ffffff00, #ffffff 40%);
}

header .site_nav .nav-menu .home-caidan-02 {
  line-height: 0.41rem;
  font-size: 0.2rem;
}

.active {
  font-size: 0.2rem;
  padding-right: 0.18rem;
  line-height: 0.41rem;
  flex-shrink: 0;
}
</style>
